import React from 'react';
import {Marker} from 'react-bmap';
import BMap from 'BMap';
import red_marker from '../../assets/red_marker.png';
import device_0 from '../../assets/device_0.png';
import device_1 from '../../assets/device_1.png';
import device_2 from '../../assets/device_2.png';

const statusMap = [device_0, device_1, device_2];


//这是个箭头函数  ，参数为{position。。。}
const StayMarker = (
    {
        position = {
            lng: 116.402544,
            lat: 39.928216
        },
        width = 21,
        height = 33,
        background = `url(${red_marker})`,
        textAlign = 'center',
        lineHeight = '1em',
        color = 'white',
        index = '',
        status,
        events = {
            click() {
            }
        },
        ...otherProps
    }
) => {
    if (typeof status === 'number') {
        width = 32;
        height = 32;
        background = `url(${statusMap[status]})`
    }
    const style = {
        width: width + 'px',
        height: height + 'px',
        textAlign,
        color,
        background,
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
    };
    const offset = new BMap.Size(-width / 2, -height);
    return (
        // fragment:没有意义的元素
        <React.Fragment>
            <Marker position={position} offset={offset}  {...otherProps} >
                <div style={style} onClick={events.click}>
                    <span>{index}</span>
                </div>
            </Marker>
        </React.Fragment>
    )

};

//返回一个函数：参数是标注点的信息
export default StayMarker;
